import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { gsap } from 'gsap';
import { ref } from 'vue';
import { model, modelLoaded} from './scene/model';

const CAMERA_INITIAL_POSITION = new THREE.Vector3(10.61147384459167, 50, 485.2688078148442);
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 3000);
const mouseVector = new THREE.Vector2();
const raycaster = new THREE.Raycaster();
let clickHandler: ((event: MouseEvent) => void) | null = null;
camera.position.copy(CAMERA_INITIAL_POSITION);
window.addEventListener("resize", () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
});
// 创建渲染器
const mainCanvas = document.createElement('canvas');
const renderer = new THREE.WebGLRenderer({
  canvas: mainCanvas, antialias: true,
  alpha: true
});
renderer.setClearColor(0x000000, 0); // 全透明
// const width =1440;
// const height =2560;
const width = window.innerWidth;
const height = window.innerHeight;
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement); // 将画布添加到页面


// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', function () {
});

let isSplit = false;
const originalPositions: { [key: string]: THREE.Vector3 } = {};
modelLoaded.then(() => {
  model.traverse((child) => {
    if (child.name) {
      originalPositions[child.name] = child.position.clone();

    }
  });
});
export function split() {
  modelLoaded.then(() => {
    model.traverse((child) => {
      if (child.name === "Bluetooth_di") {
        gsap.to(child.position, { y: -10, duration: 2 });
      }if (child.name === "Bluetooth_ding") {
        gsap.to(child.position, { y: 10, duration: 2 });
      }
      if (child.name === "电池") {
        gsap.to(child.position, { x: -5, duration: 2 });
      }
      if (child.name === "xinpian") {
        gsap.to(child.position, { y: -6.7, duration: 2 });
      }
      if (child.name === "电池001") {
        gsap.to(child.position, { x: 5, duration: 2 });
      }
      if (child.name === "Box004") {
        gsap.to(child.position, { y: -9.5, duration: 2 });
      }
    });
    isSplit = true; // 标记为已拆分状态
  })
}
export function restoreOriginalPositions() {
  modelLoaded.then(() => {
    model.traverse((child) => {
      if (child.name && originalPositions[child.name]) {
        gsap.to(child.position, {
          x: originalPositions[child.name].x,
          y: originalPositions[child.name].y,
          z: originalPositions[child.name].z,
          duration: 1,
          ease: 'power2.out'
        });
        child.visible = true;
      }
    });
    isSplit = false; // 恢复为未拆分状态
  });
}
export function resetState() {
  if (isSplit) {
    restoreOriginalPositions(); // 如果是分开状态，先还原
  }
}
export const box = ref<boolean>(false);
export const bluetooth = ref<boolean>(false);
export function click() {
  clickHandler = function (event) {

    const rect = renderer.domElement.getBoundingClientRect();
    const px = event.clientX - rect.left;
    const py = event.clientY - rect.top;
    const x = (px / width) * 2 - 1;
    const y = -(py / height) * 2 + 1;
    mouseVector.set(x, y);
    raycaster.setFromCamera(mouseVector, camera);
    const intersects = raycaster.intersectObjects([model]);
    if (intersects.length > 0) {
      const intersectedObject = intersects[0].object;
      if (intersectedObject instanceof THREE.Sprite&&intersectedObject.parent!.name==='电池') {
        box.value = true;
      }
      if (intersectedObject instanceof THREE.Sprite&&intersectedObject.parent!.name==='Box004') {
        bluetooth.value = true;
      }
    }
  };
  renderer.domElement.addEventListener('click', clickHandler);

}
export { camera, renderer }